<!DOCTYPE html>

<!-- Copyright (c) 2014, Google Inc. Please see the AUTHORS file for details.
     All rights reserved. Use of this source code is governed by a BSD-style
     license that can be found in the LICENSE file. -->

<link rel="import" href="../../../packages/spark_widgets/common/spark_widget.html">
<link rel="import" href="../../../packages/spark_widgets/spark_button/spark_button.html">
<link rel="import" href="../../../packages/spark_widgets/spark_modal/spark_modal.html">
<link rel="import" href="../../../packages/spark_widgets/spark_toolbar/spark_toolbar.html">

<polymer-element name="spark-dialog" extends="spark-widget"
    attributes="headerTitle noClosingX animation">
  <template>
    <link rel="stylesheet" href="spark_dialog.css">

    <spark-modal id="modal"
        focused
        animation="{{animation}}"
        on-transition-start="{{handleModalTransitionStart}}"
        on-transition-end="{{handleModalTransitionEnd}}">

      <spark-toolbar id="header"
          horizontal
          justify="edges"
          spacing="small">
        <span id="headerTitle">{{headerTitle}}</span>
        <template if="{{!noClosingX}}">
          <spark-button id="closingX"
              flat
              round
              padding="small"
              overlayToggle>
            <svg id="closingXGlyph" width="24px" height="24px" viewBox="0 0 24 24">
              <path d="M17.369 8.037l-1.037-1.037-4.148 4.148-4.148-4.148-1.037 1.037 4.148 4.148-4.148 4.148 1.037 1.037 4.148-4.148 4.148 4.148 1.037-1.037-4.148-4.148 4.148-4.148z"/>
            </svg>
          </spark-button>
        </template>
      </spark-toolbar>

      <form id="body" autocomplete="on">
        <content id="bodyContent" select=":not(spark-dialog-button)"></content>
      </form>

      <spark-toolbar id="footer"
          horizontal
          justify="right"
          spacing="small"
          collapseEmpty>
        <div id="progress"></div>
        <content id="buttonsContent" select="spark-dialog-button"></content>
      </spark-toolbar>
    </spark-modal>
  </template>

  <script type="application/dart" src="spark_dialog.dart"></script>
</polymer-element>
